<template>
  <div>
    <!-- -->
    <div v-if="show">
      <div>
        {{ obj[0].name }} {{ obj[0].value }} ,left:{{ obj1_l[0].name }}
        {{ obj1_l[0].value }} ,right:{{ obj1_r[0].name }} {{ obj1_r[0].value }}
      </div>
      <div>
        {{ obj[1].name }} {{ obj[1].value }} ,left:{{ obj2_l[0].name }}
        {{ obj2_l[0].value }} ,right:{{ obj2_r[0].name }} {{ obj2_r[0].value }}
      </div>
      <div>
        {{ obj[2].name }} {{ obj[2].value }} ,left:{{ obj3_l[0].name }}
        {{ obj3_l[0].value }} ,right:{{ obj3_r[0].name }} {{ obj3_r[0].value }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",

  data() {
    return {
      string:
        "Since 2016, this leading Philippine fiber broadband operator has built or leased nine IDCs across Manila’s metropolitan area, a region with 12.9 million people and one of the most densely populated cities in the world. The demand for data center services has dramatically increased so much that Converge is already engaging in a new series of major upgrades. As the company’s IDC services have been growing, customer demand has grown even faster, with bandwidth demand increasing ten-fold in just two years, straining legacy DCI systems. But given physical constraints, any new upgrades needed to be carefully thought through. The physical footprint had to be kept to a minimum, with hardware future- proofed to be match predicted increases in bandwidth demand. Furthermore, rollout needed to be quick and efficient, and simplified Operations and Maintenance (O&M) were a must, to minimize the risk of downtime.Converge looked to implement upgrades that could be deployed quickly in order to maintain the company’s reputation for high-speed, low latency services and network reliability. Following an in-depth evaluation, it selected Huawei’s DC OptiX 2.0 Wavelength Division Multiplexing (WDM) solution that, Brusola believes, is capable of handling the company’s burgeoning IDC traffic not just right now, but for the next decade too.",
      obj: null,
      obj1_l: null,
      obj2_l: null,
      obj3_l: null,
      obj1_r: null,
      obj2_r: null,
      obj3_r: null,
      show: false,
    };
  },
  created() {
    this.getData();
  },
  mounted() {},

  methods: {
    getData() {
      let listAll = this.string.toLowerCase().split(" ");

      let list1 = listAll.map((item, index) => {
        let list = [];
        if (index == 0) {
          list.push("");
          list.push(item);
          list.push(listAll[index + 1]);
        } else if (index == list.length - 1) {
          list.push(listAll[index - 1]);
          list.push(item);
          list.push("");
        } else {
          list.push(listAll[index - 1]);
          list.push(item);
          list.push(listAll[index + 1]);
        }
        return list;
      });
      console.log(list1);
      this.obj = this.stringSort(listAll);

      let list1_l = [];
      let list2_l = [];
      let list3_l = [];
      let list1_r = [];
      let list2_r = [];
      let list3_r = [];
      list1.forEach((item) => {
        if (item[1] == this.obj[0].name) {
          list1_l.push(item[0]);
          list1_r.push(item[2]);
        }
        if (item[1] == this.obj[1].name) {
          list2_l.push(item[0]);
          list2_r.push(item[2]);
        }
        if (item[1] == this.obj[2].name) {
          list3_l.push(item[0]);
          list3_r.push(item[2]);
        }
      });
      this.obj1_l = this.stringSort(list1_l);
      this.obj2_l = this.stringSort(list2_l);
      this.obj3_l = this.stringSort(list3_l);
      this.obj1_r = this.stringSort(list1_r);
      this.obj2_r = this.stringSort(list2_r);
      this.obj3_r = this.stringSort(list3_r);
      this.show = true;
    },
    stringSort(listAll) {
      let obj = [];
      for (let i = 0; i < listAll.length; i++) {
        var index1 = obj.find((item) => item.name == listAll[i]);
        if (index1) {
          index1.value++;
        } else {
          obj.push({ name: listAll[i], value: 1 });
        }
      }
      obj.sort((a, b) => {
        if (b.value > a.value) {
          return 1;
        } else if (b.value < a.value) {
          return -1;
        } else if (b.value == a.value) {
          if (b.name > a.name) {
            return -1;
          } else if (b.name < a.name) {
            return 1;
          }
        }
      });

      return obj;
    },
  },
};
</script>